<template>
 <div class="memberkpi_container">
  <!-- 搜索条件 -->
  <div class="nav">
    <Row>
      <Col span="24">
        <h2 class="addcustomergroup_title">新老会员会员销售KPI</h2>
      </Col>
    </Row>
    <Row>
      <Col span="24">
      <div class="Firstregis">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
            <Row>
                <Col span="5">
                  <FormItem label="选择颗粒度：">
                    <Row>
                      <Col span="5">
                          <RadioGroup type="button" v-model="formValidate.time_type"  class="buttongroup">
                                <Radio label="1" >日</Radio>
                                <Radio label="2" >周</Radio>
                                <Radio label="3" >月</Radio>
                                <Radio label="4" >年</Radio>
                          </RadioGroup>
                      </Col>
                    </Row>
                  </FormItem>
                </Col>
                <Col span="6" push="1">
                    <FormItem label="选择时间：">
                      <Row>
                        <Col span="5">
                            <FormItem prop="start_time" :label-width="120">
                              <DatePicker type="datetime" :value="formValidate.start_time" @on-change="formValidate.start_time=$event" format="yyyy-MM-dd" placeholder="请选择日期" style="width:9vw;"></DatePicker>
                            </FormItem>
                        </Col>
                        <Col span="7" style="text-align: center" push="10">~</Col>
                        <Col span="6" push="10">
                            <FormItem prop="end_time" :label-width="120">
                              <DatePicker type="datetime" :value="formValidate.end_time" @on-change="formValidate.end_time=$event" format="yyyy-MM-dd" placeholder="请选择日期" style="width:9vw;"></DatePicker>
                            </FormItem>
                        </Col>
                      </Row>
                    </FormItem>
                </Col>
                <Col span="8" push="5" style="margin-left:1vw;">
                    <FormItem label="选择渠道：" prop="channel_id">
                      <Select v-model="formValidate.channel_id" placeholder="请选择" style="width:9vw;">
                        <Option value="0">全部</Option>
                        <Option
                          v-for="item in channels"
                          :value="item.id"
                          :key="item.value"
                        >{{ item.name }}</Option>
                      </Select>
                    </FormItem>
              </Col>
            </Row>
            <Row style="margin-top:2vh;">
              <Col span="8">
                <Button type="success" style="width:10vw;" @click="getReportMemberSalesList">查询</Button>
              </Col>
              <Col span="3" push="10">
                <Button type="success" style="width:10vw;margin-left:1vw;" @click="exportData()">下载</Button>
              </Col>
            </Row>
          </Form>
        </div>
      </Col>
    </Row>
  </div>
  <div class="chart_container" v-if="showchart == true">
    <div id="memberkpi" v-if="showchart == true"></div>
  </div>
  <Row>
    <Col span="24">
      <!-- 表格 -->
      <div class="table_container">
        <div class="table_search_result">
          <Table :columns="columns" height="300"  :data="formList" border size="small" ref="table" style="width:100%"></Table>
        </div> 
      </div>
    </Col>
  </Row>
  
 </div>  
</template>
<script>
import {
  getReportMemberSales,
  exportMemberSales,
  fetchChannelList
} from "@/api/report";

import echarts from "echarts";
export default {
  name:'Userstatistics',
  data () {
    return {
      channels: [],
      showchart:false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      endtime:'',
      starttime:'',
      reportList: [],
      timeList: [],
      formList: [],
      nameList: [],
      formValidate: {
        // 查询参数
        start_time: "",
        end_time: "",
        channel_id: "0",
        store: "",
        time_type: "1"
      },
      ruleValidate: {             // 查询验证
        selectdate: [
          { required: true,type:"date", message: "请选择时间",trigger: "change"},
        ],
        selecttime: [
          { required: true,type:"date", message: "请选择时间",trigger: "change"},
        ],
        store: [
          { required: true,message: "请选择店铺类型",trigger: "change"}
        ],
        member: [
          { required: true,message: "请选择店铺类型",trigger: "change"}
        ]
      },
       columns: [
        {
          title: "日期",
          key: "date_str",
          align: "center",
          minWidth:150
        },
        {
          title: "指定渠道",
          key: "type",
          align: "center",
          minWidth:150
        },
        {
          title: "购买人数",
          key: "member_count",
          align: "center",
          minWidth:150
        },
        {
          title: "购买人数%",
          key: "member_percent",
          align: "center",
          minWidth:150
        },
        {
          title: "销售额",
          key: "sales_amount",
          align: "center",
          minWidth:150
        },
        {
          title: "购买单数",
          key: "sales_count",
          align: "center",
          minWidth:150
        },
        {
          title: "购买件数",
          key: "sales_product_qty",
          align: "center",
          minWidth:150
        },
        {
          title: "购买频次",
          key: "sales_freq",
          align: "center",
          minWidth:150
        },
        {
          title: "客单价",
          key: "avg_basket_size",
          align: "center",
          minWidth:150
        },
        {
          title: "客单件%",
          key: "avg_product_qty",
          align: "center",
          minWidth:150
        }
      ]
    }
  },
    created() {
    this.channelList();
  },
  methods:{
    channelList() {
      fetchChannelList().then(res => {
        if (res.data.code == 200) {
          if (res.data.data) {
            this.channels = res.data.data;
          }
        } else {
          this.$Message.error("操作失败");
        }
      });
    },
    handleSubmit (name) {         
        this.$refs[name].validate((valid) => {
            if (valid) {
                this.$Message.success('查询成功!');
            } else {
                this.$Message.error('查询失败,请补充查询条件');
            }
        })
    },
    getReportMemberSalesList() {
      this.TableLoading = true;
      this.load = true;
      if (this.formValidate.time_type == ''){
        this.$Message.error("请选择颗粒度");
        return;
      }
      if(this.formValidate.start_time > this.formValidate.end_time){
        this.$Message.error('开始时间必须小于结束时间');
        return;
      }
      if(this.formValidate.start_time == ""){
        this.$Message.error('请选择时间段');
        return;
      }
      if(this.formValidate.end_time == ""){
        this.$Message.error('请选择时间段');
        return;
      }
      if(this.formValidate.channel_id == ""){
        this.$Message.error('请选择渠道');
        return;
      }
      var reqParams = {
        time_type: this.formValidate.time_type,
        start_time: this.formValidate.start_time,
        end_time: this.formValidate.end_time,
        channel_id: this.formValidate.channel_id
      };
      if(this.formValidate.channel_id == 0){
        reqParams.channel_id = '';
      }
      getReportMemberSales(reqParams)
        .then(res => {
          this.TableLoading = false;
          if (res.data.code == 200) {
            this.reportList = res.data.result.reportLists;
            this.timeList = res.data.result.timeList;
            this.formList = res.data.result.formList;
            this.nameList = res.data.result.nameList;
            this.showchart = true;
            setTimeout(()=>{
              this.drawCharts();
            },500)
          }else if(res.data.code == 401){
            this.$Message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },
    exportData() {
      this.$refs.table.exportCsv({
          filename: "新老会员销售kpi报表"
        });
    },    
    // 折线图
    drawmemberkpi() {
      echarts.dispose(document.getElementById("memberkpi"));
      this.memberkpi = echarts.init(document.getElementById("memberkpi"));
      this.memberkpi.setOption({
         animationDelay:function(idx){
            return idx * 100;
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
          top:'95%',
          data:this.nameList,
          type:'scroll'
        },
        grid: {
            top:40
        },
        xAxis: {
            type: 'category',
            data: this.timeList
        },
        yAxis: {
            type: 'value',
            axisLine:{
                  show:true
            },
            axisTick:{
                  show:false,
            }
              
        },
        series: this.reportList
      });
    },
    drawCharts(){
      this.drawmemberkpi();
    },

    getNowFormatDate() {
      var date = moment().format("YYYY-MM-DD"); //当前时间
      var CurDate = moment().subtract(2, "days").format("YYYY-MM-DD"); //当前时间的前2天时间
      var startDate = moment().subtract(5, "days").format("YYYY-MM-DD"); //当前时间的前5天时间
      this.formValidate.start_time = startDate;
      this.formValidate.end_time = CurDate;
    }, 
  },
  mounted() {
    this.getNowFormatDate();
    var time = setInterval(() => {
      this.getNowFormatDate();
    }, 86400000);
    this.getReportMemberSalesList();
  },
}
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.memberkpi_container{
   @include container_global;
   background-color: #fff;
    .active{
      color: #68b6ff;
      border: 1px solid #8fc3ff;
      background-color: #e6f2ff;
  }
  .nav{
    height: 25vh;
    width: 100%;
    line-height: 35px;
    background-color: #fff;
    position: relative;
    .addcustomergroup_title {
      height: 7vh;
      font-weight: bolder;
    }
    .buttongroup{
      display: flex;   
      justify-content: flex-start;
    }
  } 
  .chart_container{   // 图表容器
    width: 100%;
    height: 60vh;
    border: 1px solid #e6f2ff;
    #memberkpi{
      width: 85vw;
      height: 60vh;
      padding-bottom: 2vh;
    }
  }
  .table_container{
    margin-top: 5vh;
    padding-bottom: 5vh;
    border: 1px solid #e8edf1;
      .table_search_result{
        width: 100%;
        height: 300px;
        border: 1px solid #e8edf1;
      }
  }
  .page{
   @include page_global;
  }
}
</style>
